<template>
  <div class="changeinfo_wrapper">
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="userinfo.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="userinfo.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-upload class="avatar-uploader" :action="upload_avatar_url"
                 :on-success="handleAvatarSuccess"
                 :show-file-list="false">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div class="reset_avatar_below_text" style="margin-top: 10px;">
        修改头像
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {postRequest} from "../utils/api";
  import {uploadFileRequest} from "../utils/api";
  import {mapGetters, mapState} from 'vuex';
  export default {
      name: "ChangeUserInfo",
      props: ['dialogFormVisible'],
      data(){
        return {
          dialogFormVisible: false,
          // upload_avatar_url: "/api/user_consumer/uploadAvatar?token="+window.localStorage.getItem("token"),
          upload_avatar_url: "api/consumer/test",
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          formLabelWidth: '120px',
          imageUrl:''
        }
      },
      methods: {
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          console.debug("upload 请求返回结果："+JSON.stringify(res))
          this.$message.success("修改头像成功")
          this.$store.commit("updateAvatar", res.data.t)
        },
      },
      watch:{
        dialogFormVisible(newv, oldv){
          // console.debug("dialogFormVisible newv"+newv)
          // console.debug("dialogFormVisible oldv"+oldv)
          this.$emit('dialogFormVisible', newv)
        }
      },
      computed: {
        ...mapState(['userinfo']),
        ...mapGetters({asd:'inc_inc'})
      },
    }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #897e7e;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<style scoped>

</style>
